<template>
  <div class="home">
    <template v-if="receptData.list?.length > 0">
      <section>
        <topBg :my-bg="'home/homeBg.png'" />
        <ul class="infiniteUl">
          <li
            class="infiniteLi"
            v-for="(product, index) in receptData.list"
            :key="index"
            @click="goTogroupLink(product)"
          >
            <homeCard :options="product">
              <template #default>
                <div
                  class="topBg jscenter"
                  @click.stop="commanderDetail(product)"
                >
                  <nut-image
                    round
                    :src="
                      product.avatar
                        ? product.avatar
                        : 'https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png'
                    "
                    class="userImg"
                  >
                    <template #error>
                      <nut-image
                        src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
                      ></nut-image>
                    </template>
                  </nut-image>
                  <p class="userName">{{ product.nickname }}</p>
                  <p class="createTime">{{ product.human_create_time }}</p>
                </div>
              </template>
            </homeCard>
          </li>
        </ul>
      </section>
    </template>

    <template v-else>
      <section class="default lcenter">
        <nut-image :src="getAssetsFile('home/defaultHome.png')" fit="contain" />
        <p>暂无团购</p>
      </section>
    </template>

    <section v-if="isFirst !== 'false'">
      <guideStep1></guideStep1>
    </section>
  </div>
</template>

<script lang="ts" name="home" setup>
import { ref, reactive, onMounted, toRefs } from "vue";
import { getAssetsFile, isRes } from "@/utils/pub-use";
import topBg from "./components/topBg/topBg.vue";
import { Toast } from "@nutui/nutui";
import homeCard from "./components/HomeCard.vue";
import guideStep1 from "./components/Guide.vue";
import { useRouter } from "vue-router";
import { getIndexApi } from "@/api/home/index";
//---------------------------------------判断是否是第一次进入---------------------------------------
let isFirst = localStorage.getItem("wtgFirst");

//---------------------------------------首页商品数据---------------------------------------

const getIndex = async () => {
  let res = await getIndexApi({
    page: 1,
    pagesize: 9999,
  });

  if (isRes(res)) {
    receptData.value = res.result;
  }
};

const receptData: any = ref({});

//---------------------------------------上拉加载更多下拉刷新---------------------------------------

onMounted(() => {
  getIndex();
});
//---------------------------------------跳转到团购链接---------------------------------------
const router = useRouter();
const goTogroupLink = (item: any) => {
  router.push({
    path: "/home/groupLink",
    query: {
      id: item.serial_num,
      userId: item.id,
    },
  });
};
//---------------------------------------跳转团长详情---------------------------------------
const commanderDetail = (item: any) => {
  router.push({
    path: "/home/commander",
    query: {
      id: item.number,
    },
  });
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  background: #f8f9fa;
  .topBg {
    width: 100%;
    height: 402px;
  }
  .infiniteUl {
    padding: 0 20px;
    position: absolute;
    top: 40px;
    border: none;
    width: -webkit-fill-available;
    padding-bottom: 150px;
    .infiniteLi {
      margin-top: 20px;
      .topBg {
        padding: 0 30px;
        height: 150px;
        width: auto;
        background: linear-gradient(
          134deg,
          #dcf9e8 0%,
          #e8f9e0 31%,
          #fbfad3 57%,
          #ffffff 100%
        );
        box-shadow: 0px 2px 6px 0px rgba(204, 214, 203, 0.16);
        border-radius: 20px 20px 0px 0px;
        border: none;
        border-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0)
          )
          3 3;
        .userImg {
          width: 60px;
          height: 60px;
        }
        .userName {
          font-size: 28px;
          color: #000000;
          margin-left: 10px;
          margin-right: auto;
        }
        .createTime {
          font-size: 22px;
          color: #999999;
        }
      }
    }
    .infiniteLi:nth-child(1) {
      margin-top: 0;
    }
  }
  .default {
    height: 100vh;
    background: #f7f8f9;
    .nut-image {
      :deep(img) {
        width: 301px;
        height: 245px;
      }
    }
    p {
      font-size: 28px;
      color: #999999;
    }
  }
}
</style>
